<template>
  <div class="demo">
    <van-tabs v-model:active="active" class="top" type="card">
      <van-tab title="当前订单">
        <card :info="item" v-for="item in list" :key="item"></card>
      </van-tab>
      <van-tab title="历史订单">
        <van-tabs v-model:active="history" class="right">
          <van-tab title="门店订单">
            <card :info="item" v-for="item in list" :key="item"></card>
          </van-tab>
          <van-tab title="网购订单">
            <!-- <card :info="item" v-for="item in list" :key="item"></card> -->
            <van-empty description="您当前还没有点单喔">
              <van-button round type="danger" class="bottom-button pr-20 pl-20" size="small">去点单</van-button>
            </van-empty>
          </van-tab>
          <van-tab title="充值订单">
            <van-empty description="您当前还没有点单喔">
              <van-button round type="danger" class="bottom-button pr-20 pl-20" size="small">去点单</van-button>
            </van-empty>
            <!-- <card :info="item" v-for="item in list" :key="item"></card> -->
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { ref } from "vue";
import card from "./components/orderCard.vue";
export default {
  name: "list",
  components: {
    card,
  },
  setup() {
    const active = ref(0);
    const history = ref(0);
    const list = ref([]);
    const intData = () => {
      let info = {
        type: "到店",
        time: "2021-10-08 20:47:22",
        status: "已完成",
        totalNum: 3,
        totalMoney: 99,
        children: [
          {
            title: "洗剪吹",
            num: 2,
            money: 15,
          },
          {
            title: "洗剪吹2",
            num: 2,
            money: 15,
          },
          {
            title: "洗剪吹3",
            num: 2,
            money: 15,
          },
        ],
      };
      list.value = [info, info, info, info];
    };
    intData();
    return {
      active,
      history,
      list,
      intData,
    };
  },
};
</script>
<style scoped lang="less">
.demo {
  .top {
    /deep/.van-tabs__content {
      height: calc(100vh - 1.3333rem - 45px);
      overflow-y: auto;
      padding: 0 0.42667rem;
      box-sizing: border-box;
      .right {
        /deep/.van-tabs__content {
          height: calc(100vh - 1.3333rem - 90px);
          overflow-y: auto;
          padding: 0;
        }
      }
      .card {
        margin-top: 10px;
        .money {
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
